<!--医院端--订单跟踪--批发采购订单列表--详情（已完成） -->
<template>
  <div class="auth-product completedDetailsBox">
    <el-container class="completedDetails">
      <!-- 列表 -->
      <el-collapse
        class="collapsebox"
        v-model="activeitemNames"
        @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title">
            <el-form
              ref="form"
              class="topForm"
              v-loading="formLoading"
              :model="formdata"
              label-width="130px">
              <el-form-item label="平台订单编号:">
                <div>{{ formdata.purchaseOrderCode }}</div>
              </el-form-item>
              <el-form-item label=" 医院订单编号:">
                <div>{{ formdata.hospitalOrderCode }}</div>
              </el-form-item>
            </el-form>
          </template>
          <div>
            <el-header height="auto">
              <div class="formToptext">
                <el-form
                  :inline="true"
                  v-loading="formLoading"
                  :model="formdata"
                  ref="ruleForm"
                  label-width="150px" >
                  <el-form-item
                    v-for="(item,index) in completedDetailsDetailForm"
                    :key="index"
                    :label="item.title">
                    <div
                      v-if="item.key === 'purchaseOrderStatus'"
                      class="textBox">：{{ statusArr[Number(formdata[item.key])] }}</div>
                    <div
                      v-else
                      class="textBox">：{{ formdata[item.key] }}</div>
                  </el-form-item>
                </el-form>
              </div>
            </el-header>
            <!-- 列表模块 -->
            <el-editable
              class="hospital-edit-box"
              :data="getList"
              height="200"
              v-loading="tableLoading"
              :columns="completedDetailsTableData"
            >
              <!-- 订单数量/单位 -->
              <template
                slot="default-purchaseNum"
                slot-scope="scope">
                {{ scope.row.purchaseNum }}/{{ scope.row.unit }}
              </template>
            </el-editable>
            <!-- 分页模块 -->
            <el-pagination
              class="pagination"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="curPage"
              :page-sizes="PAGE_NUMBER"
              :page-size="pageSize"
              :layout="PAGINATION_LAYOUT"
              :total="totalElements"
            />
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-container>
    <div class="partTitle">收货明细</div>
    <div
      v-for="(item,index) in deliveryDetailList"
      :key=index>
      <RecordZoomCard
        :card-data="item.purOrderItemList"
        :need-title="true"
        :card-columns="completedDetailsTable"
        :card-son-columns='completedDetailsTableInside'
        :show-list="true"
        :row-title='rowTitle'
        :base-info='baseInfo[index]'
      >
        <template
          slot="baseInfo"
          slot-scope="scope">
          <div>
            <el-form
              :inline="true"
              label-width="155px"
            >
              <el-form-item
                v-for="(item) in ReceivingTitle"
                :key='item.key'
                :label='item.label'>
                {{ scope.baseInfo[item.key] }}
              </el-form-item>
            </el-form>
          </div>
        </template>
      </RecordZoomCard>
    </div>
  </div>
</template>

<script>
import {
  completedDetailsTableData,
  completedDetailsDetailForm,
  statusArr,
  completedDetailsTable,
  completedDetailsTableInside,
  ReceivingTitle
} from './const'
import SearchForm from '@components/businesscomponents/search'
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common'
import { attrItemList } from '@const/orderCenterApi'
import RecordZoomCard from '@/moduleComponents/beforeSettle/distributorSide/purchasingManagement/accompaniedbygoods'
import {
  getHospitalPurchaseOrderItem,
  getHospitalPurchaseOrderList,
  getHospitalOcBsPurchaseOrderDistributor,
  getByBsAddress
} from '@const/beforeSettleApi'
import ElEditable from '@components/el-editable'
import { cloneDeep, isObject } from 'lodash'
export default {
  components: { ElEditable, SearchForm, RecordZoomCard },
  data () {
    return {
      completedDetailsTable,
      // 展开收起
      activeitemNames: ['1'],
      // 展开收起
      activeNames: [],
      // 订单状态
      statusArr,
      // 表单Loading
      formLoading: false,
      // 表格Loading
      tableLoading: false,
      // 收货列表Loading
      goodTableLoading: false,
      // 表头
      completedDetailsTableData,
      // 表格数据
      getList: [],
      // 收货明细列表
      purOrderItemList: [],
      // 表单编辑默认值
      formdata: {},
      // 表单 详情展示内容-table
      completedDetailsDetailForm,
      // 部分收货表单
      receiptDetailsForm: {},
      // 部分收货内部
      completedDetailsTableInside,
      // 详情ID
      detailsId: this.$route.query.id,
      deliveryDetailList: [],
      baseInfo: [],
      rowTitle: 'distributorList',
      curPage: 1, // 当前页
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      pageSize: PAGE_NUMBER[0], // 一页的数量
      totalElements: 0, // 总共的条数
      partDetailTableLoading: false,
      insideTableLoading: false,
      ReceivingTitle
    }
  },

  mounted () {
    let arr = [{ type: 'button', val: '返回', handle: this.back }]
    const btn = {
      type: 'btn',
      arr: arr
    }
    this.$store.commit('changeLayoutHandle', btn)
    this.list()
    this.getDetails()
    this.getDeliveryDetailList()
  },

  methods: {
    // 点击返回
    back () {
      this.$router.go(-1)
    },
    getDeliveryDetailList () {
      this.partDetailTableLoading = true
      this.insideTableLoading = true
      // type 标识订单来源，1.批发2.寄售3.跟台
      this.$axios
        .get(`${attrItemList}?id=${this.id}&type=1`)
        .then(({ data }) => {
          if (Number(data.code) !== 0) return
          this.deliveryDetailList = data.payload
          console.log(this.deliveryDetailList)
          this.baseInfo = this.deliveryDetailList.map(item => {
            return {
              receiveCode: item.receiveCode,
              createdAt: item.createdAt,
              purchaseNumCount: item.purchaseNumCount,
              receiveNumCount: item.receiveNumCount
            }
          })
        })
        .catch(e => {})
        .finally(() => {
          this.partDetailTableLoading = false
          this.insideTableLoading = false
        })
    },
    // 获取详情数据
    getDetails () {
      // Loading加载开始
      this.formLoading = true
      // 请求列表数据
      this.$axios
        .$post(getHospitalPurchaseOrderList, {
          id: this.detailsId
        })
        .then(res => {
          let content = isObject(res.payload.content) ? res.payload.content : []
          if (content.length) {
            this.formdata = content[0]
            this.ByBsAddress(content[0].receiveAddressId)
          }

          this.formLoading = false
        })
        .finally(res => {
          this.formLoading = false
        })
    },

    // 查询收货地址详情
    ByBsAddress (byId) {
      this.$axios
        .$post(getByBsAddress + '?id=' + byId, {
          id: byId
        })
        .then(res => {
          let content = isObject(res.payload) ? res.payload : {}
          let str =
            content.province +
            content.city +
            content.area +
            content.detailedAddress
          this.$set(this.formdata, 'detailedAddress', str)
          this.$set(this.formdata, 'user_Name', content.userName)
          this.$set(this.formdata, 'user_Phone', content.userPhone)
        })
        .finally(res => {
          this.formLoading = false
        })
    },
    getattrItemList () {
      this.$axios
        .get(`${attrItemList}?id=${this.$route.query.id}&type=1`)
        .then(res => {
          if (Number(res.data.code) !== 0) return
          this.deliveryDetailList = res.data.payload
          console.log(this.deliveryDetailList)
          this.baseInfo = this.deliveryDetailList.map(item => {
            return {
              receiveCode: item.receiveCode,
              createdAt: item.createdAt,
              purchaseNumCount: item.purchaseNumCount,
              receiveNumCount: item.receiveNumCount
            }
          })
        })
    },
    // 获取详情列表
    list () {
      // Loading加载开始
      this.tableLoading = true
      // 请求列表数据
      this.$axios
        .$post(getHospitalPurchaseOrderItem, {
          id: this.detailsId,
          page: this.curPage,
          pageSize: this.pageSize
        })
        .then(res => {
          let { content, totalElements } = isObject(res.payload)
            ? res.payload
            : {}
          this.getList = content
          this.totalElements = totalElements
          this.tableLoading = false
        })
        .finally(res => {
          this.tableLoading = false
        })
    },

    // 收货列表
    receivingGoodslist () {
      // Loading加载开始
      this.goodTableLoading = true
      // 请求列表数据
      this.$axios
        .$post(getHospitalOcBsPurchaseOrderDistributor, {
          id: this.detailsId
        })
        .then(res => {
          let { purOrderItemList } = isObject(res.payload) ? res.payload : {}
          this.purOrderItemList = purOrderItemList
          this.goodTableLoading = false
        })
        .finally(res => {
          this.goodTableLoading = false
        })
    },

    // 展开收起
    handleChange (val) {
      console.log(val)
    },

    // 页码更改
    handleSizeChange (size) {
      this.pageSize = size
      this.list()
    },

    // 切换不一样的页面,重置一切数据
    handleCurrentChange (curPage) {
      this.curPage = curPage
      this.list()
    }
  }
}
</script>

<style lang="less">
.completedDetailsBox {
  .partTitle {
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    display: block;
    margin: 20px;
  }
}

.completedDetails {
  //   height: 100%;
  //   overflow: auto;
  .topForm {
    display: flex;
  }

  .collapsebox {
    width: 100%;

    .titleBox {
      width: 100%;
    }

    .formBox {
      width: 500px;
      float: left;
    }

    .submissionBox {
      float: right;
      margin-right: 10px;
    }
  }

  .receiptDetailsForm {
    display: flex;
  }

  .addbutton {
    border: none;
    background: none;
    color: rgba(35, 113, 197, 1);
  }

  .submission {
    background: rgba(35, 113, 197, 1);
    border: 0;
    color: #fff;
    margin-bottom: 10px;
  }

  .topInput {
    width: 211px;
  }

  .pagination {
    padding-top: 10px;
    display: flex;
    justify-content: flex-end;
    padding-right: 0;
  }

  .formToptext {
    margin-bottom: 20px;

    .el-form-item {
      margin-right: 16px;
      margin-bottom: 16px;

      .textBox {
        width: 220px;
      }
    }

    .el-form-item__label {
      padding-right: 10px;
    }
  }
}
</style>
